<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍收藏</title>
    <link rel="stylesheet" href="./css/library.css">
    <link rel="stylesheet" href="./css/library1.css" media="(max-width:768px)">
</head>

<body>
    <header>
        <div class="header-title">
            <div class="header-img">
                <img src="./imgas/Logo1.png" alt="Logo">
            </div>
            <div class="header-nav">
                <div class="header-login">
                    <img src="./imgas/peopleWhite.png" alt="User Icon">
                    <div class="header-loginBtn" onclick="window.open('loginPage.html')">登录</div>
                    <div class="header-loginUser"></div>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="main-contain">
            <div class="contain-left">
                <div class="library-btn">个人信息</div>
                <div class="library-btn">我的收藏</div>
                <div class="library-btn">我的借阅</div>
            </div>
            <div class="contain-right">
                <div class="like-list-title">收藏列表</div>
                <div class="like inner" style="display: none;" data-index="1" id="shou">
                    <div class="like-list">
                        <div class="list-info">
                            <div class="list-index">1.</div>
                            <div class="list-name">你好，世界</div>
                            <div class="list-type">图书</div>
                            <div class="list-unlikebtn">
                                <img src="./imgas/like.png" alt="">
                            </div>
                        </div>
                        <div class="list-content">
                            <div style="display: flex;">
                                <img src="./imgas/hello_world.jpg" alt="">
                                <div class="content-main">
                                    <div class="main-line1">
                                        <div class="main-chubanshe">
                                            <span>出版社:</span>
                                            <span>中国友谊出版公司 / 2020-12</span>
                                        </div>
                                        <div class="main-num">
                                            <span>剩余可借:</span>
                                            <span>2</span>
                                        </div>
                                    </div>
                                    <div class="main-line2">
                                        <span>内容与摘要附注:</span>
                                        <span>123</span>
                                    </div>
                                    <div class="main-line3">
                                        <div class="line3-inline">
                                            <div class="main-detail list" data-id="0">详细信息</div>
                                            <div class="main-assets list" data-id="1">图书数量(3)</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="container" style="display: none;">
                                <div>
                                    <div class="eachDetail">
                                        <span class="t1">责任者：</span>
                                        <span class="t2">（中国）中共中央文献研究室编编</span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">版本说明：</span>
                                        <span class="t2">一</span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">出版发行项：</span>
                                        <span class="t2">北京:中央文献出版社,1991.7</span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">ISBN及定价：</span>
                                        <span class="t2">7-5073-0073-0 平装/5.8</span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">载体形态项：</span>
                                        <span class="t2">628;32</span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">并列正题名：</span>
                                        <span class="t2"></span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">丛编项：</span>
                                        <span class="t2"></span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">个人责任者：</span>
                                        <span class="t2">中共中央文献研究室编,中国,编</span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">中图法分类号：</span>
                                        <span class="t2">A841</span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">一般附注：</span>
                                        <span class="t2"></span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">题名责任附注：</span>
                                        <span class="t2"></span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">出版发行附注：</span>
                                        <span class="t2"></span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">主题检索附注：</span>
                                        <span class="t2"></span>
                                    </div>
                                    <div class="eachDetail">
                                        <span class="t1">提要文摘附注：</span>
                                        <span class="t2"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="borrow inner" style="display: none;" data-index="2">
                    <div class="borrow-title">
                        <div>
                            当前借阅
                        </div>
                        <div>
                            <!-- 借阅历史 -->
                        </div>
                    </div>
                    <div class="borrow-contain">
                        <div class="list-info">
                            <div class="list-index">1.</div>
                            <div class="list-name">你好，世界</div>
                            <div class="list-type">图书</div>
                        </div>
                        <div class="list-content">
                            <div style="display: flex;">
                                <img src="./imgas/hello_world.jpg" alt="2">
                                <div class="content-main">
                                    <div class="main-line1">
                                        <div class="main-chubanshe">
                                            <span>借阅时间:</span>
                                            <span>2024/6/1</span>
                                        </div>
                                        <div class="main-num">
                                            <span>应还时间:</span>
                                            <span>2024/6/15</span>
                                        </div>
                                    </div>
                                    <div class="borrow-btn">
                                        续借
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user inner" data-index="0">
                    <div class="user-info">
                        <div class="user-basic">
                            <p>
                                <span>
                                    名字:
                                </span>
                                <span class="username">

                                </span>
                            </p>
                            <p>账号：</p>
                            <p>图书馆：湖南科技职业学院图书馆</p>
                            <p>预付款：</p>
                        </div>
                        <div class="user-contact">
                            <p>手机号：</p>
                            <p>
                                <span>
                                    邮箱：
                                </span>
                                <span class="email">
                                    
                                </span>
                            </p>
                        </div>
                    </div>
                    <div class="user-status">
                        <p>到书提醒</p>
                        <p>图书超期</p>
                        <p>未处理行为</p>
                    </div>
                    <div class="user-detail">
                        <h3>基本信息</h3>
                        <p>系别：</p>
                        <p>年级：</p>
                        <p>班级：</p>
                        <p>职业：</p>
                        <p>单位：</p>
                        <p>部门：</p>
                        <p>证号：</p>
                        <p>用户类型：</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="./js/library.js"></script>
</body>

</html>